<template>
  <div>
    <!-- 导航栏 -->
    <van-nav-bar :title="$route.name"/>
    <!-- 上边 -->

    <!-- 轮播图 -->
    <van-swipe class="banner" :autoplay="2000">
      <van-swipe-item v-for="item in bannerlist" :key="item.id">
        <img class="imglb" :src="item.img">
      </van-swipe-item>
    </van-swipe>
    <!-- 静态格子 -->
    <van-grid :column-num="5" :border="false">
      <van-grid-item>
        <van-image :src="require('../assets/images/icon/seckill.png')"/>
        <p class="navtitle">限时秒杀</p>
      </van-grid-item>
      <van-grid-item>
        <van-image :src="require('../assets/images/icon/top.png')"/>
        <p class="navtitle">畅销商品</p>
      </van-grid-item>
      <van-grid-item>
        <van-image :src="require('../assets/images/icon/brand.png')"/>
        <p class="navtitle">品质大牌</p>
      </van-grid-item>
      <van-grid-item>
        <van-image :src="require('../assets/images/icon/selfsupport.png')"/>
        <p class="navtitle">小U自营</p>
      </van-grid-item>
      <van-grid-item>
        <van-image :src="require('../assets/images/icon/integral.png')"/>
        <p class="navtitle">积分商城</p>
      </van-grid-item>
    </van-grid>
    <!-- 图片切换 -->
    <van-tabs class="goods" type="card">
      <van-tab title="双11尖货预购">
        <van-image class="img" width="80px" height="80px" :src="require('../assets/images/home/01.png')"/>
        <van-image class="img" width="80px" height="80px" :src="require('../assets/images/home/01.png')"/>
        <van-image class="img" width="80px" height="80px" :src="require('../assets/images/home/01.png')"/>
        <van-image class="img" width="80px" height="80px" :src="require('../assets/images/home/01.png')"/>
      </van-tab>
      <van-tab title="畅购全球">
        <van-image class="img" width="80px" height="80px" :src="require('../assets/images/home/02.png')"/>
        <van-image class="img" width="80px" height="80px" :src="require('../assets/images/home/02.png')"/>
        <van-image class="img" width="80px" height="80px" :src="require('../assets/images/home/02.png')"/>
        <van-image class="img" width="80px" height="80px" :src="require('../assets/images/home/02.png')"/>
      </van-tab>
    </van-tabs>
    <!-- 首页商品切换 -->
    <van-tabs class="goods" type="card">
      <van-tab title="热门推荐">
        <van-card
          @click="goDetail(item.id)"
          v-for="item in hotlist"
          :key="item.id"
          num="1"
          :price="item.price | toPrice"
          desc="描述信息"
          :title="item.goodsname"
          :thumb="item.img"
          :origin-price="item.market_price"
        />
      </van-tab>
      <van-tab title="上新推荐">
        <van-card
          @click="goDetail(item.id)"
          v-for="item in newlist"
          :key="item.id"
          num="1"
          :price="item.price | toPrice"
          desc="描述信息"
          :title="item.goodsname"
          :thumb="item.img"
        />
      </van-tab>
      <van-tab title="所有商品">
        <van-card
          @click="goDetail(item.id)"
          v-for="item in goodslist"
          :key="item.id"
          num="1"
          :price="item.price | toPrice"
          desc="描述信息"
          :title="item.goodsname"
          :thumb="item.img"
        />
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
//引入封装好的接口
import { getBanner, homeGoods } from "../request/api";
export default {
  data() {
    return {
      bannerlist: [],
      hotlist: [],
      newlist: [],
      goodslist: []
    };
  },
  mounted() {
    //组件一加载就调用轮播图接口
    getBanner().then(res => {
      // console.log(res, "响应");
      if (res.code == 200) {
        this.bannerlist = res.list;
      }
    });
    //组件一加载就调用首页商品列表
    homeGoods().then(res => {
      console.log(res, "首页商品列表");
      if (res.code == 200) {
        this.hotlist = res.list[0].content;
        this.newlist = res.list[1].content;
        this.goodslist = res.list[2].content;
      }
    });
  },
  methods: {
    //跳转商品详情
    goDetail(id) {
      this.$router.push("/detail?id=" + id);
    }
  }
};
</script>

<style scoped>
.imglb {
  width: 100%;
  height: 200px;
  border-radius: 10px;
}
.banner {
  width: 95%;
  margin: 0 auto;
  box-sizing: border-box;
}
.navtitle {
  font-size: 12px;
}
.goods {
  margin-bottom: 80px;
}
.van-nav-bar {
  background: red;
  height: 50px;
  margin-bottom: 5px;
}
.img{
  margin-left: 10px;
  margin-top: 20px
}
</style>
